<template>
	<view class="map-search-list">
		<u-popup class="my-popup-md" v-model="show" mode="bottom" width="100%" height="100%"
			:safe-area-inset-bottom="true" :mask-close-able="false" :custom-style="{'background': '#efefef'}">
			<view class="md-content">
				<!-- <view class="cancel-btn" @click="closeMd">取消</view> -->
				<u-search class="search-inp" v-model="curval" :shape="'square'" :bg-color="'#fff'"
					:border-color="'#00c3ce'" :placeholder="'请输入地点关键字搜索并选择'" :focus="false" :height="80"
					:color="'#00c3ce'" :maxlength="30" :margin="'16rpx'" :show-action="true" :action-text="'取消'"
					@change="onChange" @custom="closeMd"></u-search>

				<view class="list-content">
					<view class="point-item" v-for="(it, index) in poilist" :key="index" :data-obj="it"
						@click="selItem">
						<view class="point-name" :class="{'c-qgreen': curval == it.name}">
							<u-icon name="map" :color="curval == it.name ? '#00c3ce' : '#999'" size="40"></u-icon>
							{{it.name}}
						</view>
						<view class="point-address">{{it.area}}{{it.name}}（{{it.type}}）</view>
						<u-icon class="point-collect" size="40" name="star" color="#999"></u-icon>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: "map-search-list",
		props: {
			// 参数名称
			name: {
				type: String,
				default: 'pointName'
			},
			// 参数所在对象下标
			nameIndex: {
				type: String,
				default: ""
			},
		},
		data() {
			return {
				show: true,
				// 地图地址poi列表
				poilist: [],
				// 当前选择的地址
				curval: ''
			};
		},
		created() {
			console.log('父级传入的参数名称：', this.nameIndex);

		},
		methods: {
			// 关闭弹框
			closeMd() {
				this.$emit('myClick', {
					show: false
				})
			},
			// 选择列表项
			selItem(e) {
				console.log(e);
				const that = this,
					point = e.currentTarget.dataset.obj;

				that.curval = point.address;

				that.$emit('myClick', {
					show: false,
					name: that.name,
					nameIndex: that.nameIndex,
					obj: point
				});
			},
			// 搜索现有数据
			onChange(val) {
				const that = this,
					U = that.U;
				console.log('搜索内容', val);

				that.$u.throttle(function() {
					console.log('发送请求', val);

					that.$u.api.getMapPointList({
						keywords: val,
						isFindSta: '0',
						city: '成都',
					}).then(res => {
						if (res.code == 1) {
							that.poilist = res.data;

							console.log('地址列表', that.poilist);
						}
					});
				}, 700)

			}
		},
	}
</script>

<style lang="scss">
	.map-search-list {
		width: 100%;

		// 弹框样式
		.md-content {
			position: relative;

			// 取消按钮
			.cancel-btn {
				position: fixed;
				top: 14rpx;
				right: 19rpx;
				background: #00c3ce;
				border-top-right-radius: 10rpx;
				border-bottom-right-radius: 10rpx;
				padding: 10rpx 20rpx;
				line-height: 60rpx;
				color: #fff;
				z-index: 99;
			}
		}

		.search-inp {
			padding-right: 20rpx;
			position: fixed;
			top: -2rpx;
			width: 100%;
			background: #fff;
			z-index: 9;
		}

		.list-content {
			margin-top: 140rpx;

			.point-item {
				border-bottom: 2rpx solid #efefef;
				line-height: 44rpx;
				padding: 10rpx 60rpx 10rpx 20rpx;
				position: relative;

				.point-name {
					font-weight: 600;
					font-size: 30rpx;
					color: #333;
				}

				.point-address {
					color: #999;
					font-size: 26rpx;
				}

				.point-collect {
					top: calc((100% - 40rpx)/2);
					right: 20rpx;
					position: absolute;
				}
			}
		}
	}
</style>